<!DOCTYPE html>
<html lang="en">

<body>
  
    <svg viewBox="0 0 100 100" width="200" height="200">
        <circle cx="20" cy="20" r="10" fill="#f00">
            <animate 
                attributeName="cx"
                values="30;90"
                calcMode="spline"
                keySplines="0 1 1 0"
				begin="t.click"
                dur="4s"
                fill="freeze"/>
        </circle>
		<circle cx="20" cy="40" r="10" fill="#0f0">
            <animate 
                attributeName="cx"
                values="30;90"
                calcMode="spline"
                keySplines="0 .5 1 .5"
				begin="t.click"
                dur="4s"
                fill="freeze"/>
        </circle>
		
		<circle cx="20" cy="60" r="10" fill="#00f">
            <animate 
                attributeName="cx"
                values="30;90"
                calcMode="spline"
                keySplines="1 0 1 1"
				begin="t.click"
                dur="4s"
                fill="freeze"/>
        </circle>
		
		<text x="50" y="80" font-size="8" text-anchor="middle" id="t" style="cursor:pointer;user-select:none">点我</text>
    </svg>
	
	<svg viewBox="0 0 100 100" width="200" height="200">
        <path d="M0 0 L 100 100" fill="none" stroke="#fac" stroke-width="1" />
        <path d="M0 0 C0 50,100 50,100 100" fill="none" stroke="#0f0" stroke-width="1" />
        <path d="M0 0 C0 100,100 0,100 100" fill="none" stroke="#f00" stroke-width="1" />
        <path d="M0 0 C100 0,0 100,100 100" fill="none" stroke="#00f" stroke-width="1" />
    </svg>

    


</body>
</html>
